<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>账号与安全</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/member.css"/>
    <script type="text/javascript" src="../../script/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../script/mobile.js"></script>
    <script type="text/javascript">
        window['adaptive'].desinWidth = 750;
        window['adaptive'].baseFont = 28;
        window['adaptive'].maxWidth = 750;
        window['adaptive'].init();
    </script>
</head>

<body>
<div id="header" style="height: 0.9rem; background: #fff; position: fixed; top: 0;left: 0; width: 100%; z-index: 99">
    <header class="header header-shadow">
        <div class="header-left">
            <div tapmode onclick="comeBack();" class="nav-left"><img class="icon-back" src="../../icon/icon-back.png"/>
            </div>
        </div>
        <h2>申请徽章</h2>
    </header>
</div>
<div class="header-h" style="padding-top: 1.5rem;"></div>
<section class="html_section bg-f5">
    <div class="h90 bg-fff line_center pl30 pr30 between" onclick="commonUrl('huizhang_choose')" tapmode><span
            id="hz_name" class="f30 ">选择徽章</span><img class="arr_move" src='../../icon/move.png'/></div>
    <div class="bg-fff mt30 pl30 pr30">
        <div class="pt30"><span class="f30 ">添加证明</span><span class="f24 c-999 ml15">上传相关证明，最多上传三张</span></div>
        <div class="activity-detail mt30 bg-fff">
            <ul id="icon_list">
                <li class="choose-pic" id="choosePic" tapmode>
                    <div class="pic-icon">拍照/照片<br/>（必填）</div>
                </li>
            </ul>
        </div>
        <div class="btn1 mt100">申请</div>
    </div>

</section>

</body>

</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
    var hz = 0;
    apiready = function () {
        setFixStatusBar(); //设置状态栏
        keybackListener()
        //监听城市
        api.addEventListener({
            name: 'hz_choose'
        }, function (ret, err) {
            console.log(jsonChange(ret));
            hz = ret.value.id;
            $("#hz_name").html(ret.value.title);
        });
    }

    $(".btn1").click(function () {
        var icon = '';

        if (hz == 0) {
            pop.notice('请选择您要申请的勋章');
            return;
        }
        $("#icon_list li.img_li").each(function (i, item) {
            if (i == 0)
                icon = $(item).data("id");
            else
                icon += ',' + $(item).data("id");
        })
        if (icon == "") {
            pop.notice('请上传上传申请的相关证明');
            return;
        }
        pop.loading();
        getAjax(Interface.apply_badge, {token: $api.getStorage('token'), badge_id: hz, icons: icon}, function (res) {
            pop.close();
            pop.notice(res.msg, 1.3, function () {
                comeBack();
            })
        }, function (res, err) {
        })
    })

    $("#choosePic").click(function () {
        var count = 0;
        $("#icon_list li.img_li").each(function (i, item) {
            count++;
        })
        if (count == 3) {
            pop.notice('最多只能上传三张');
            return;
        }
        uploadbg();
    })

    function uploadbg() {
        uploadHeadPic(function (res) {
            console.log(jsonChange(res));
            $("#icon_list").prepend(' <li class="img_li" id="img_' + res.icon + '" data-id="' + res.icon + '"><img src="' + getImg(res.path) + '" alt=""><div tapmode onclick="delImg(' + res.icon + ')" class="delete"></div></li>');
        })
    }

    //删除图片
    function delImg(id) {
        $("#img_" + id).remove();
    }
</script>
